<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0  maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="icon_font/iconfont.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>
        body {
            background-color: #eff3f6;

        }
        .container-fluid {
            height: 100%;
            padding: 0;
        }

        .top_header {
            background-color: #50d2c2;
            height: 200px;
            padding-top: 20px;
        }

        .white {
            color: #fff;
            font-size: 40px;
        }

        .top_header h3 {
            position: absolute;
            left: 50%;
            top: 3%;
            transform: translateX(-50%);
            color: #fff;
        }

        .bottom {
            margin-top: 40px;
            padding-left: 10px;
        }

        .bottom img {
            width: 50px;
        }

        .bottom input {
            border: none;
            background-color: transparent;
            outline: none;
            color: #fff;
            font-size: 20px;
            vertical-align: middle;
            width: 84px;
        }

        .xiugai {
            color: #fff;
            font-size: 20px;
            vertical-align: middle;
        }

        .client {
            background-color: #fff;
            height: 200px;
            padding-top: 15px;
            padding-left: 15px;
        }
        .client h3 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }
        .client a {
            text-decoration: none;
            color: #000;
            display: flex;
            flex-direction: column;
            margin-top: 40px;
        }
        .client a img {
            width: 60px;
            height: 60px;
        }
        .client a text {
            margin-top: 10px;
        }
        footer {
            background-color: #fff;
            margin-top: 10px;
            padding: 15px;
        }
        .h_top h3 {
            margin: 0;
        }
        .father {
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
        }
        .father a {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #000;

        }
        .father a text {
            margin-top: 10px;

        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="top_header">
            <div class="top">
                <i class="icon-zuojiantou
                    iconfont white"></i>
                <h3>个人中心</h3>
            </div>
            <div class="bottom">
                <img src="img/touxiang.png" alt="">
                <input value="浮生若梦" disabled="true"></input>
                <span class="iconfont icon-xiugai xiugai"></span>
            </div>

        </div>
        <div class="client">
            <h3>租客服务</h3>
            <a href="javascript:;" class="dianfei">
                <img src="img/dian.png" alt="">
                <text>缴纳电费</text>
            </a>
        </div>
        <footer>
            <div class="h_top">
                <h3>商业合作</h3>
                <div class="father">
                    <a href="javascript:;">
                        <img src="img/jingli.png" alt="">
                        <text>客户经理</text>
                    </a>
                    <a href="javascript:;">
                        <img src="img/fangyuan.png" alt="">
                        <text>推荐房源</text>
                    </a>
                    <a href="javascript:;">
                        <img src="img/qianbao.png" alt="">
                        <text>我的钱包</text>
                    </a>
                    <a href="javascript:;">
                        <img src="img/jilu.png" alt="">
                        <text>成交记录</text>
                    </a>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>